<!--
<template>
	<view class="container">
		&lt;!&ndash; 课时概览卡片 &ndash;&gt;
		<view class="hours-overview">
			<view class="overview-header">
				<text class="overview-title">课时概览1111111111</text>
				<text class="overview-subtitle">当前剩余课时情况</text>
			</view>
			<view class="hours-display">
				<view class="hours-circle">
					<text class="hours-number">{{ userInfo.remainingHours }}</text>
					<text class="hours-unit">课时</text>
				</view>
				<view class="hours-info">
					<view class="info-item">
						<text class="info-label">总课时</text>
						<text class="info-value">{{ userInfo.totalHours }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">已使用</text>
						<text class="info-value">{{ userInfo.usedHours }}</text>
					</view>
				</view>
			</view>
		</view>

		&lt;!&ndash; 快捷操作 &ndash;&gt;
		<view class="quick-actions">
			<view class="action-item" @click="navigateTo('/pages/recharge/recharge')">
				<view class="action-icon">
					<text class="icon-text">💰</text>
				</view>
				<text class="action-text">课时充值</text>
			</view>
			<view class="action-item" @click="showHistory">
				<view class="action-icon">
					<text class="icon-text">📊</text>
				</view>
				<text class="action-text">使用记录</text>
			</view>
		</view>

		&lt;!&ndash; 最近记录 &ndash;&gt;
		<view class="recent-records">
			<view class="section-header">
				<text class="section-title">最近记录</text>
				<text class="section-more" @click="showHistory">查看更多</text>
			</view>

			<view class="record-list">
				<view class="record-item" v-for="item in recentRecords" :key="item.id">
					<view class="record-icon">
						<text class="icon-text" :class="item.type">{{ getRecordIcon(item.type) }}</text>
					</view>
					<view class="record-info">
						<text class="record-title">{{ item.title }}</text>
						<text class="record-time">{{ item.time }}</text>
					</view>
					<view class="record-amount" :class="item.type">
						<text class="amount-text">{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</text>
					</view>
				</view>
			</view>
		</view>

		&lt;!&ndash; 使用统计 &ndash;&gt;
		<view class="usage-stats">
			<view class="section-header">
				<text class="section-title">使用统计</text>
			</view>

			<view class="stats-grid">
				<view class="stats-item">
					<text class="stats-number">{{ stats.thisMonth }}</text>
					<text class="stats-label">本月使用</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{ stats.lastMonth }}</text>
					<text class="stats-label">上月使用</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{ stats.average }}</text>
					<text class="stats-label">月均使用</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showAdjustModal: false,
			userInfo: {
				remainingHours: 12,
				totalHours: 50,
				usedHours: 38,
				role: 0
			},
			recentRecords: [
				{
					id: 1,
					type: 'use',
					title: '小课辅导',
					time: '2024-01-15 14:00',
					amount: -1
				},
				{
					id: 2,
					type: 'recharge',
					title: '课时充值',
					time: '2024-01-14 10:30',
					amount: 10
				},
				{
					id: 3,
					type: 'use',
					title: '小课辅导',
					time: '2024-01-13 16:00',
					amount: -1
				},
				{
					id: 4,
					type: 'adjust',
					title: '管理员调整',
					time: '2024-01-12 09:15',
					amount: 2
				}
			],
			stats: {
				thisMonth: 8,
				lastMonth: 12,
				average: 10
			},
			adjustForm: {
				studentName: '',
				amount: '',
				reason: ''
			}
		}
	},
	onLoad() {
		this.loadUserInfo()
		this.loadRecords()
	},
	methods: {
		loadUserInfo() {
			// 加载用户信息
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.userInfo = { ...this.userInfo, ...userInfo }
			}
		},

		loadRecords() {
			// 加载课时记录
		},

		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},

		showHistory() {
			uni.navigateTo({
				url: '/pages/hours/history'
			})
		},

		getRecordIcon(type) {
			const iconMap = {
				'use': '📚',
				'recharge': '💰',
				'adjust': '⚙️'
			}
			return iconMap[type] || '📝'
		},

		showAdjustModal() {
			this.showAdjustModal = true
		},

		closeAdjustModal() {
			this.showAdjustModal = false
			this.adjustForm = {
				studentName: '',
				amount: '',
				reason: ''
			}
		},

		confirmAdjust() {
			if (!this.adjustForm.studentName.trim()) {
				uni.showToast({
					title: '请输入学生姓名',
					icon: 'none'
				})
				return
			}

			if (!this.adjustForm.amount) {
				uni.showToast({
					title: '请输入调整数量',
					icon: 'none'
				})
				return
			}

			if (!this.adjustForm.reason.trim()) {
				uni.showToast({
					title: '请输入调整原因',
					icon: 'none'
				})
				return
			}

			uni.showLoading({
				title: '调整中...'
			})

			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '调整成功',
					icon: 'success'
				})
				this.closeAdjustModal()
			}, 1500)
		},

		showStudentList() {
			uni.navigateTo({
				url: '/pages/admin/students'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
	padding-bottom: 40rpx;
}

.hours-overview {
	margin: 20rpx;
	padding: 40rpx;
	background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
	border-radius: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.3);

	.overview-header {
		text-align: center;
		margin-bottom: 40rpx;

		.overview-title {
			display: block;
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.overview-subtitle {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}

	.hours-display {
		display: flex;
		align-items: center;
		justify-content: space-around;

		.hours-circle {
			text-align: center;

			.hours-number {
				display: block;
				font-size: 80rpx;
				color: #00B8D4;
				font-weight: bold;
				line-height: 1;
			}

			.hours-unit {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}

		.hours-info {
			.info-item {
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.info-label {
					display: block;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					margin-bottom: 4rpx;
				}

				.info-value {
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: bold;
				}
			}
		}
	}
}

.quick-actions {
	margin: 20rpx;
	display: flex;
	gap: 20rpx;

	.action-item {
		flex: 1;
		background: #1a1f2e;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		border: 1rpx solid #2a2f3e;

		.action-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 16rpx;

			.icon-text {
				font-size: 28rpx;
			}
		}

		.action-text {
			font-size: 26rpx;
			color: #FFFFFF;
		}
	}
}

.recent-records {
	margin: 20rpx;

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
		}

		.section-more {
			font-size: 24rpx;
			color: #00B8D4;
		}
	}
}

.record-list {
	.record-item {
		background: #1a1f2e;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid #2a2f3e;

		.record-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #2a2f3e;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			.icon-text {
				font-size: 28rpx;

				&.use {
					color: #f44336;
				}

				&.recharge {
					color: #4cd964;
				}

				&.adjust {
					color: #ff9800;
				}
			}
		}

		.record-info {
			flex: 1;

			.record-title {
				display: block;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-bottom: 8rpx;
			}

			.record-time {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}

		.record-amount {
			.amount-text {
				font-size: 32rpx;
				font-weight: bold;

				&.use {
					color: #f44336;
				}

				&.recharge {
					color: #4cd964;
				}

				&.adjust {
					color: #ff9800;
				}
			}
		}
	}
}

.usage-stats {
	margin: 20rpx;

	.section-header {
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
	}
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;

	.stats-item {
		background: #1a1f2e;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		border: 1rpx solid #2a2f3e;

		.stats-number {
			display: block;
			font-size: 36rpx;
			color: #00B8D4;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.stats-label {
			font-size: 24rpx;
			color: #AAB4BE;
		}
	}
}

.admin-section {
	margin: 20rpx;

	.section-header {
		margin-bottom: 20rpx;

		.section-title {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: bold;
		}
	}
}

.admin-actions {
	display: flex;
	gap: 20rpx;

	.admin-item {
		flex: 1;
		background: #1a1f2e;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		border: 1rpx solid #2a2f3e;

		.admin-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 16rpx;

			.icon-text {
				font-size: 28rpx;
			}
		}

		.admin-text {
			font-size: 26rpx;
			color: #FFFFFF;
		}
	}
}

.adjust-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;

	.modal-content {
		background: #1a1f2e;
		border-radius: 20rpx;
		width: 80%;
		max-width: 600rpx;

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #2a2f3e;

			.modal-title {
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}

			.modal-close {
				font-size: 40rpx;
				color: #AAB4BE;
				line-height: 1;
			}
		}

		.adjust-form {
			padding: 30rpx;

			.form-item {
				margin-bottom: 30rpx;

				.form-label {
					display: block;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-bottom: 16rpx;
					font-weight: 500;
				}

				.form-input {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
					border-radius: 16rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					border: 2rpx solid #3a3f4e;
					transition: all 0.3s ease;
					box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);

					&:focus {
						border-color: #00B8D4;
						box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					}

					&::placeholder {
						color: rgba(170, 180, 190, 0.6);
					}
				}

				.form-textarea {
					width: 100%;
					height: 140rpx;
					background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
					border-radius: 16rpx;
					padding: 24rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					border: 2rpx solid #3a3f4e;
					transition: all 0.3s ease;
					box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					resize: none;

					&:focus {
						border-color: #00B8D4;
						box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					}

					&::placeholder {
						color: rgba(170, 180, 190, 0.6);
					}
				}
			}
		}

		.modal-actions {
			display: flex;
			gap: 20rpx;
			padding: 30rpx;
			border-top: 1rpx solid #2a2f3e;

			.cancel-btn, .confirm-btn {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				border: none;
			}

			.cancel-btn {
				background: #2a2f3e;
				color: #AAB4BE;
			}

			.confirm-btn {
				background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
				color: #FFFFFF;
			}
		}
	}
}
</style>
-->
